<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="css/resume.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="resume-container">
        <!-- 头部区域 -->
        <header class="resume-header">
            <div class="profile">
                <div class="profile-pic">
                    <div class="avatar-placeholder">
                        <i class="fas fa-user"></i>
                    </div>
                </div>
                <div class="profile-info">
                    <h1>湛峻权</h1>
                    <p class="job-title">学生</p>
                    <p class="student-id">学号：202340210118</p>
                    <p class="tagline">勤奋好学，对计算机技术充满热情，积极参与各类实践项目</p>
                </div>
            </div>
            <div class="contact-info">
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <span>zhanjunquan@example.com</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-phone"></i>
                    <span>138-1234-5678</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>北京市</span>
                </div>
                <div class="contact-item">
                    <i class="fab fa-github"></i>
                    <span>github.com/zhanjunquan</span>
                </div>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="resume-content">
            <!-- 左侧内容 -->
            <div class="resume-left">
                <!-- 技能部分 -->
                <section class="resume-section">
                    <h2 class="section-title">
                        <i class="fas fa-tools"></i> 技能
                    </h2>
                    <div class="skills">
                        <div class="skill-category">
                        <h3>前端技术</h3>
                        <div class="skill-list">
                            <div class="skill-item">
                                <span>HTML5 / CSS3</span>
                                <div class="skill-bar">
                                    <div class="skill-progress" style="width: 85%;"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span>JavaScript</span>
                                <div class="skill-bar">
                                    <div class="skill-progress" style="width: 75%;"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span>Bootstrap</span>
                                <div class="skill-bar">
                                    <div class="skill-progress" style="width: 70%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3>基础学科</h3>
                        <div class="skill-list">
                            <div class="skill-item">
                                <span>数据结构</span>
                                <div class="skill-bar">
                                    <div class="skill-progress" style="width: 80%;"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span>算法分析</span>
                                <div class="skill-bar">
                                    <div class="skill-progress" style="width: 75%;"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span>计算机网络</span>
                                <div class="skill-bar">
                                    <div class="skill-progress" style="width: 80%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </section>

                <!-- 语言能力 -->
                <section class="resume-section">
                    <h2 class="section-title">
                        <i class="fas fa-language"></i> 语言能力
                    </h2>
                    <div class="language-list">
                        <div class="language-item">
                            <span>中文（母语）</span>
                            <div class="language-level">精通听说读写，具有良好的书面表达能力</div>
                        </div>
                        <div class="language-item">
                            <span>英语（专业八级，流利）</span>
                            <div class="language-level">
                                <div class="language-skill">
                                    <span>听：能轻松听懂英语新闻、讲座和技术文档讲解</span>
                                    <div class="skill-bar">
                                        <div class="skill-progress" style="width: 90%;"></div>
                                    </div>
                                </div>
                                <div class="language-skill">
                                    <span>说：能流利进行日常对话和技术交流</span>
                                    <div class="skill-bar">
                                        <div class="skill-progress" style="width: 85%;"></div>
                                    </div>
                                </div>
                                <div class="language-skill">
                                    <span>读：能快速阅读专业英文文献和技术文档</span>
                                    <div class="skill-bar">
                                        <div class="skill-progress" style="width: 95%;"></div>
                                    </div>
                                </div>
                                <div class="language-skill">
                                    <span>写：能撰写专业报告和技术文档</span>
                                    <div class="skill-bar">
                                        <div class="skill-progress" style="width: 80%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="language-item">
                            <span>日语（N2水平）</span>
                            <div class="language-level">
                                <div class="language-skill">
                                    <span>基础会话能力，能阅读简单的技术资料</span>
                                    <div class="skill-bar">
                                        <div class="skill-progress" style="width: 60%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="language-item">
                            <span>编程语言</span>
                            <div class="language-level">
                                <span>JavaScript、HTML/CSS、Python</span>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 兴趣爱好 -->
                <section class="resume-section">
                    <h2 class="section-title">
                        <i class="fas fa-heart"></i> 兴趣爱好
                    </h2>
                    <div class="hobbies">
                        <div class="hobby-tag">编程</div>
                        <div class="hobby-tag">阅读</div>
                        <div class="hobby-tag">摄影</div>
                        <div class="hobby-tag">跑步</div>
                        <div class="hobby-tag">旅行</div>
                        <div class="hobby-tag">打球</div>
                    </div>
                </section>
            </div>

            <!-- 右侧内容 -->
            <div class="resume-right">
                <!-- 实习经历 -->
                <section class="resume-section">
                    <h2 class="section-title">
                        <i class="fas fa-briefcase"></i> 实习经历
                    </h2>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-header">
                                <h3>前端开发实习生</h3>
                                <span class="timeline-date">2024年7月 - 2024年9月</span>
                            </div>
                            <div class="timeline-company">科技有限公司</div>
                            <div class="timeline-content">
                                <ul>
                                    <li>参与公司官网改版项目的前端开发工作</li>
                                    <li>使用HTML5、CSS3和JavaScript实现响应式页面</li>
                                    <li>协助团队解决前端兼容性问题</li>
                                    <li>学习并应用Vue.js框架开发组件</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 校园活动 -->
                <section class="resume-section">
                    <h2 class="section-title">
                        <i class="fas fa-university"></i> 校园活动
                    </h2>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-header">
                                <h3>计算机协会会员</h3>
                                <span class="timeline-date">2023年9月 - 至今</span>
                            </div>
                            <div class="timeline-company">校计算机协会</div>
                            <div class="timeline-content">
                                <ul>
                                    <li>积极参与协会组织的技术分享会和研讨会</li>
                                    <li>参与校园编程竞赛的组织和筹备工作</li>
                                    <li>与同学组队参加校内黑客马拉松比赛</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 教育背景 -->
                <section class="resume-section">
                    <h2 class="section-title">
                        <i class="fas fa-graduation-cap"></i> 教育背景
                    </h2>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-header">
                                <h3>计算机科学与技术</h3>
                                <span class="timeline-date">2023年9月 - 至今</span>
                            </div>
                            <div class="timeline-company">某某大学 | 本科 | 在读</div>
                            <div class="timeline-content">
                                <ul>
                                    <li>主修课程：数据结构、程序设计基础、计算机网络、操作系统等</li>
                                    <li>GPA：3.7/4.0，获得优秀新生奖学金</li>
                                    <li>积极参与课堂讨论和项目实践，成绩优良</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 项目经验 -->
                <section class="resume-section">
                    <h2 class="section-title">
                        <i class="fas fa-project-diagram"></i> 项目经验
                    </h2>
                    <div class="project-list">
                        <div class="project-item">
                            <div class="project-header">
                                <h3>个人博客网站</h3>
                                <span class="project-date">2024年3月 - 2024年5月</span>
                            </div>
                            <div class="project-content">
                                <p class="project-description">使用HTML5、CSS3和JavaScript开发的个人技术博客网站</p>
                                <ul>
                                    <li>设计并实现响应式布局，支持PC端和移动端访问</li>
                                    <li>实现文章发布、分类、标签等功能</li>
                                    <li>优化页面加载速度和用户体验</li>
                                </ul>
                                <p class="project-tech">技术栈：HTML5, CSS3, JavaScript, Bootstrap</p>
                            </div>
                        </div>
                        <div class="project-item">
                            <div class="project-header">
                                <h3>简易待办事项应用</h3>
                                <span class="project-date">2023年12月 - 2024年1月</span>
                            </div>
                            <div class="project-content">
                                <p class="project-description">课程项目：开发一个基于Web的待办事项管理应用</p>
                                <ul>
                                    <li>实现任务的添加、删除、修改和状态更新功能</li>
                                    <li>使用localStorage存储数据</li>
                                    <li>设计直观友好的用户界面</li>
                                </ul>
                                <p class="project-tech">技术栈：HTML5, CSS3, JavaScript</p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>
</body>
</html>